import { defineComponent, PropType, useAttrs } from "vue";
// import { MenuItem } from "./types";
// import { toLine } from "../../../utils";
import * as Icons from "@element-plus/icons-vue";
import style from './index.module.scss'
export default defineComponent({
  props: {
    data: { type: Array as PropType<any[]>, default: () => [] },
    defaultActive: { type: String, default: "" },
    router: { type: Boolean, default: false },
    name: { type: String, default: "name" }, //菜单标题的键名
    index: { type: String, default: "index" }, //菜单索引的键名
    icon: { type: String, default: "icon" }, //菜单图标的键名
    children: { type: String, default: "children" }, //子菜单的键名
  },
  setup(props, ctx) {
    let attrs = useAttrs();
    console.log(attrs, "attrs");

    // 渲染无限层级菜单的方法
    let renderMenu = (data: any[]) => {
      return data.map((item: any) => {
        // 每个图标
        item.i = (Icons as any)[item[props.icon]!];
        //插槽处理
        let slots = {
          title: () => {
            return (
              <>
                <item.i    /> <span>{item[props.name]}</span>
              </>
            );
          },
        };
        //递归调用菜单
        if (item[props.children] && item[props.children].length) {
          return (
            <el-sub-menu index={item[props.index]} v-slots={slots}>
              {renderMenu(item[props.children])}
            </el-sub-menu>
          );
        }
        //正常渲染普通菜单
        return <el-menu-item index={item[props.index]} v-slots={slots}></el-menu-item>;
      });
    };
    return () => {
      return (
        <el-menu
          default-active={props.defaultActive}
          router={props.router}
          {...attrs}
          className={style.svgs}
        >
          {renderMenu(props.data)}
        </el-menu>
      );
    };
  },
});
